<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>优站精选</title>
    <!-- Bootstrap -->
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../css/show_list.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <![endif]-->
</head>
<body>
<div class="jumbotron giant-curtain">
    <div class="container">
        <div class="row giant-curtain-text">
            <div class="col-sm-12">
                <h1>
                    <a href="#">Bootstrap<br>
                        <span style="font-size: 60%;font-weight: normal">优站精选</span>
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>
<div class="container text-center">
    <div class="row">
        <div class="col-sm-6">
            <div class="thumbnail product-thumbnail">
                <img src="../images/Laravel.jpg">
                <div class="caption">
                    <a href="#" class="product-list">Laravel</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="thumbnail product-thumbnail">
                <img src="../images/BootCDN.jpg">
                <div class="caption">
                    <a href="#" class="product-list">BootCDN</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="thumbnail product-thumbnail">
                <img src="../images/Laravel.jpg">
                <div class="caption">
                    <a href="#" class="product-list">Laravel</a>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="thumbnail product-thumbnail">
                <img src="../images/BootCDN.jpg">
                <div class="caption">
                    <a href="#" class="product-list">BootCDN</a>
                </div>
            </div>
        </div>
    </div>
    <nav aria-label="...">
        <ul class="pager">
            <li class="previous"><a href="#">上一页</a></li>
            <small>第 1 页/共 89 页</small>
            <li class="next"><a href="#">下一页</a></li>
        </ul>
    </nav>
</div>
<div class="container-fluid contact-container text-center">
    <div>
            如果你的网站基于<a href="#">Bootstrap</a>构建、并且用心的设计，那就提交到<a href="#">youzhan@bootcss.com</a>  在这里展示吧！
    </div>
    <div>
        请注明“Bootstrap网站作品提交 -- 你的网址”
    </div>
</div>
<div class="container-fluid footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div>
                    <h4>友情链接</h4>
                    <div class="progress progress-leptonema">
                        <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                            <span class="sr-only"></span>
                        </div>
                        <div class="progress-bar progress-bar-silvery" style="width: 70%">
                            <span class="sr-only">70% </span>
                        </div>
                    </div>
                </div>
                <div class="link-friend">
                    <a  href="#">Bootstrap中文网</a>
                    <a  href="#">Bootstrap中文网</a>
                    <a  href="#">Bootstrap中文网</a>
                    <a  href="#">Bootstrap中文网</a>
                    <a  href="#">Bootstrap中文网</a>
                    <a  href="#">Bootstrap中文网</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div>
                    <h4>我们用到的技术</h4>
                    <div class="progress progress-leptonema">
                        <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
                            <span class="sr-only"></span>
                        </div>
                        <div class="progress-bar progress-bar-silvery" style="width: 70%">
                            <span class="sr-only">70% </span>
                        </div>
                    </div>
                </div>
                <div></div>
            </div>
            <div class="col-sm-4">
                <div>
                    <h4>赞助商</h4>
                    <div class="progress progress-leptonema">
                        <div class="progress-bar"  style="width: 30%;">
                            <span class="sr-only">30% </span>
                        </div>
                        <div class="progress-bar progress-bar-silvery" style="width: 70%">
                            <span class="sr-only">70% </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid copyright">
    <div class="text-center">Copyright © 优站精选 | 京ICP备11008151号</div>
</div>
<script src="../bootstrap/js/jquery-3.3.1.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>